<template>
    <div class="topBox f f-j-b">
        <div>
            <div v-if="true" class="leftBox">
                <div @click.stop="detlist" class="CreateaTopic">创建话题</div>
                <!-- 下面的话题 -->
                <div class="topicList">
                    <div v-for="(item, index) in list" :key="index" @click="youTabs(item, index)"
                        :class="{ active: num == index + 1 }" class="itemObj f f-a-c f-j-b">
                        <div class="titleName">
                            <img src="/src/status/img/5.png" v-if="num == index + 1" class="jinghaoImg" alt="">
                            <img src="/src/status/img/6.png" v-else class="jinghaoImg" alt="">
                            {{ item.name }}
                        </div>
                        <img src="/src/status/det.png" @click="detlistQie(item)" v-if="num == index + 1" class="detels"
                            alt="">
                    </div>
                </div>
            </div>
        </div>
        <div>
            <!-- 中间的 -->
            <div v-if="leftList" class="centerBox">
                <div class="CreateTopic">创建话题</div>
                <div class="inpBox">
                    <!-- 对号 -->
                    <div @click="detilsDui" class="Check f f-a-c f-j-c" :class="{ act: ind == 2 }">
                        <img src="/src/status/dui.png" class="duihao" alt="">
                    </div>
                    <input type="text" v-model="value" @change="changeFn" class="inp" placeholder="请输入话题标题" name="" id="">
                </div>
                <div class="topics">你可以试试下面的话题</div>
                <!-- 下面的话题 -->
                <div class="list f f-a-c f-w-w">
                    <div @click="SolarTerms(item.name)" v-for="(item, index) in getTopics" :key="index" class="itemIte">
                        <img src="/src/status/10.png" class="jinghao" alt="">
                        {{ item.name }}
                    </div>
                    <!-- <div @click="SolarTerms('食品百科')" class="itemIte">
                        <img src="/src/status/10.png" class="jinghao" alt="">
                        食品百科
                    </div>
                    <div @click="SolarTerms('中国近代历史')" class="itemIte">
                        <img src="/src/status/10.png" class="jinghao" alt="">
                        中国近代历史
                    </div>
                    <div @click="SolarTerms('世界地理')" class="itemIte">
                        <img src="/src/status/10.png" class="jinghao" alt="">
                        世界地理
                    </div> -->
                </div>
            </div>
            <!-- 中间的列表 -->
            <div v-if="addTicpo">
                <div v-if="listsHang" class="listCount">
                    <van-list offset="10" @load="onLoad">
                        <div v-for="(item, index) in listsHang" :key="index" class="itemCount">
                            <div class="topName">{{ item.title }}</div>
                            <!-- 时间 -->
                            <div class="topTime">{{ item.date }} {{ item.time }}</div>
                            <!-- 内容 -->
                            <div class="count" v-html="item.content"></div>
                            <!-- 下面的查看详情 -->
                            <div class="ViewDetails f f-a-c f-j-b">
                                <!-- 点击打开详情 -->
                                <div @click="itemList(item)" class="chakanDetil">查看详情</div>
                                <div class="tuPian f f-a-c">
                                    <img src="/src/status/img/caiji.png" class="caiji" v-if="item.is_collect == 2" alt="">
                                    <img src="/src/status/img/yicaiji.png" v-else class="caiji" alt="">
                                    <div @click="Acquisition(item, index)" v-if="item.is_collect == 2" class="Ingredients">
                                        采集
                                    </div>
                                    <div @click="Acquisition(item, index)" v-else class="Ingredients indShow">已采集</div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </div>
                <!-- 这个是列表没有数据时候 -->
                <div v-show="listsHang.length == 0" class="listCounts">
                    <img src="/src/status/zanwu.png" class="zanwu" alt="">
                    <div class="zanwuName">暂无数据</div>
                    <div class="count">请在下方或右侧输入对应关键字搜索</div>
                </div>
            </div>
        </div>
        <div>
            <!-- 右面的搜索 -->
            <div v-if="true" class="rigthBox">
                <div class="concept">
                    <div class="conce f f-a-c">概念<img src="/src/status/img/gai.png" class="gai" alt="">
                    </div>
                    <input type="text" @input="input1" placeholder="请输入概念" v-model="gaiValue.name" class="inp" name=""
                        id="">
                    <div v-show="showPicker1" class="boxView">
                        <div v-for="(item, index) in columns1" @click.stop="onConfirm1(item)" :key="index" class="name">{{
                            item.name }}</div>
                    </div>
                </div>
                <div class="concept">
                    <div class="conce f f-a-c">类别<img src="/src/status/img/gai.png" class="gai" alt=""></div>
                    <input type="text" @input="input2" placeholder="请输入类别" v-model="categoryValue.name" class="inp" name=""
                        id="">
                    <div v-show="showPicker2" class="boxView">
                        <div v-for="(item, index) in columns2" @click.stop="onConfirm2(item)" :key="index" class="name">{{
                            item.name }}</div>
                    </div>
                </div>
                <div class="concept">
                    <div class="conce f f-a-c">地点<img src="/src/status/img/gai.png" class="gai" alt=""></div>
                    <input type="text" @input="input3" placeholder="请输入地点" v-model="addressValue.name" class="inp" name=""
                        id="">
                    <div v-show="showPicker3" class="boxView">
                        <div v-for="(item, index) in columns3" :key="index" @click.stop="onConfirm3(item)" class="name">
                            {{
                                item.name
                            }}</div>
                    </div>
                </div>
                <!-- 时间 -->
                <div class="concept">
                    <div class="conce f f-a-c">时间范围</div>
                    <!-- <el-date-picker v-model="value4" @change="changeFn" type="dates" placeholder="请选择时间范围" /> -->
                    <el-date-picker v-model="value4" @change="changeFn" type="daterange" range-separator="至"
                        start-placeholder="起始日期" end-placeholder="结束日期" :size="size" />
                </div>
                <!-- 排序 -->
                <div class="concept">
                    <div class="conce f f-a-c">排序</div>
                    <div class="sotr f f-a-c f-j-c">
                        <div :class="{ act: active == 1 }" @click="timeXiang(1)" class="tim cenTime">时间</div>
                        <div :class="{ act: active == 2 }" @click="timeXiang(2)" class="tim">相关</div>
                    </div>
                </div>
                <!-- 重置-->
                <div class="concept">
                    <div class="sotr f f-a-c f-j-b">
                        <div @click="reset" class="tims">重置</div>
                        <div @click="schec" class="cenTimes">搜索</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 下面的搜索 -->
    <div class="botSchet">
        <div @click="comfig" class="suosuImg f f-a-c f-j-c">
            <img src="/src/status/img/4.png" class="schImg" alt="">
        </div>
        <img src="/src/status/img/chahao.png" @click="resets" v-if="shectValue.length" class="chahao" alt="">
        <input type="text" v-model="shectValue" placeholder="请输入关键词搜索" class="inpShou" name="" id="">
    </div>
    <!-- <div v-loading="true"> -->
    <CountDetile @Trmit="Trmit" @Acquisition="Acquisitions" ref="Detil" :item="item" />

    <!-- </div> -->
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
import CountDetile from './CountDetile/index.vue'
import { Concepts, GetCategories, Chat, CollectData, Translate, GetLocations, GetArticleList, MyTopics, CreateTopics, TopicsList } from '../../api/index'
import { showLoadingToast, closeToast } from 'vant'
import { ElMessage, ElMessageBox } from 'element-plus'
let ind = ref(1)
let active = ref(0)//排序
let value = ref('')
let gaiValue = ref({
    name: '',
    uri: ''
})//输入概念
let categoryValue = ref({
    name: '',
    uri: ''
})//添加类别
let addressValue = ref({
    name: '',
    uri: ''
})//添加类别
let addValue = ref('')//地点
let value4 = ref('')//时间
let time = ref('')
let timeTim = ref(null)
let caijiList = ref([])
let num = ref(1)//话题选择
let Detil = ref(null)//设置ref
const item = ref({})
let addTicpo = ref(true)//控制创建话题显示与否
let listTicpo = ref(true)//控制列表显示
let leftList = ref(false)//控制列表显示
let zanwuTicpo = ref(false)//控制暂无列表显示
let shectValue = ref('')//搜索的内容
let obj = ref({})//搜索的内容
let temls1 = ref(null)//搜索的内容
let temls2 = ref(null)//搜索的内容
let temls3 = ref(null)//搜索的内容
let showPicker1 = ref(false)//搜索的内容
let showPicker2 = ref(false)//搜索的内容
let showPicker3 = ref(false)//搜索的内容
let listsHang = ref([])//搜索的内容
let list = ref([])//话题列表
let getTopics = ref([])//话题列表
let pageNum = ref(0)//搜索的内容
let pageSize = ref(1)//搜索的内容
let columns1 = ref([{ name: '杭州', uri: 'Hangzhou' },
{ name: '宁波', uri: 'Ningbo' },
{ name: '温州', uri: 'Wenzhou' },
{ name: '绍兴', uri: 'Shaoxing' },
{ name: '湖州', uri: 'Huzhou' }])//搜索的内容
let columns2 = ref([{ name: '杭州', uri: 'Hangzhou' },
{ name: '宁波', uri: 'Ningbo' },
{ name: '温州', uri: 'Wenzhou' },
{ name: '绍兴', uri: 'Shaoxing' },
{ name: '湖州', uri: 'Huzhou' }])//搜索的内容
let columns3 = ref([{ name: '杭州', uri: 'Hangzhou' },
{ name: '宁波', uri: 'Ningbo' },
{ name: '温州', uri: 'Wenzhou' },
{ name: '绍兴', uri: 'Shaoxing' },
{ name: '湖州', uri: 'Huzhou' }])//搜索的内容
onMounted(() => {
    // 获取推荐话题
    initTuiJian()
    let n = JSON.parse(localStorage.getItem('objObj')) || {}
    obj.value = JSON.parse(localStorage.getItem('obj')) || {}
    gaiValue.value = n.gaiValue || {
        name: '',
        uri: ''
    }
    categoryValue.value = n.categoryValue || {
        name: '',
        uri: ''
    }
    addressValue.value = n.addressValue || {
        name: '',
        uri: ''
    }
    ind.value = n.ind || 1
    TopicList()
})
const initTuiJian = async () => {
    let n = await Chat()
    getTopics.value = n.content.topics_list
}
// 点击翻译
const Trmit = async () => {
    Detil.value.loading = true
    let n = await Translate({
        title: item.value.title,
        content: item.value.content
    })
    Detil.value.loading = false
    item.value.title = n.content.data.zh_title
    item.value.content = n.content.data.zh_content
}
// 点击采集
const Acquisition = async (item, index) => {
    // caijiList.value.push(item.uri)
    item.is_collect = 1
    console.log(item, '56454645545651651651');
    const toast = showLoadingToast({
        duration: 0,
        forbidClick: true,
        message: '加载中..',
    });
    let n = await CollectData({
        topics_id: list.value[num.value - 1].id,
        uri: item.uri,
        title: item.title,
        content: item.content,
        article_time: item.date + ' ' + item.time,
    })
    closeToast()
    if (n.code == 200) {
        ElMessage.success(n.msg)
    } else {
        ElMessage.error(n.msg)

    }
}
// 点击采集
const Acquisitions = async (item, index) => {
    caijiList.value.push(item.uri)
    Detil.value.loading = true
    let n = await CollectData({
        topics_id: list.value[num.value - 1].id,
        uri: item.uri,
        title: item.title,
        content: item.content,
        article_time: item.date + ' ' + item.time,
    })
    Detil.value.loading = false
    if (n.code == 200) {
        ElMessage.success(n.msg)
    } else {
        ElMessage.error(n.msg)

    }
}
// 删除话题
const detlistQie = (item) => {
    ElMessageBox.confirm(
        '如果删除，采集里的相应文章也会随之删除，确认要删除吗？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let n = await TopicsList({
                topics_id: item.id
            })
            if (n.code == 200) {
                ElMessage.success(n.msg)
                list.value = []
                TopicList()
            } else {
                ElMessage.error(n.msg)
            }
        })
        .catch(() => {
            // ElMessage({
            //     type: 'info',
            //     message: 'Delete canceled',
            // })
        })
}
//点击创建话题
const detlist = () => {
    addTicpo.value = false
    leftList.value = true

}
//点击创建话题确认按钮
const detilsDui = async () => {
    let n = await CreateTopics({
        name: value.value
    })
    if (n.code == 200) {
        ElMessage.success(n.msg)
        TopicList()
    } else {
        ElMessage.error(n.msg)
    }
    addTicpo.value = true
    leftList.value = false
}
// 获取我的话题列表
const TopicList = async () => {
    let n = await MyTopics()
    let lists = []
    n.content.list.forEach(item => {
        lists.push({
            ...item,
            status: 0
        })
    })
    list.value = [...list.value, ...lists]
    list.value[0].status = 1
    // title.value = list.value[0]
}
// 点击创建话题-------------------------------------------------------------------------
const CreateTopic = () => {
    addTicpo.value = true
    listTicpo.value = false
    zanwuTicpo.value = false
}

const input1 = (e) => {
    if (!e.data) {
        showPicker1.value = false
        return
    }
    clearTimeout(temls1.value)
    temls1.value = setTimeout(async () => {
        const toast = showLoadingToast({
            duration: 0,
            forbidClick: true,
            message: '加载中...',
        });
        let n = await Concepts({ searchKey: gaiValue.value.name })
        closeToast();
        columns1.value = n.content.list
        showPicker1.value = true
    }, 1000);
}
// 这个是点击确定
const onConfirm1 = (item) => {
    gaiValue.value = item
    showPicker1.value = false
}
// 第二个概念input框
const input2 = (e) => {
    if (!e.data) {
        showPicker2.value = false
        return
    }
    clearTimeout(temls2.value)
    temls2.value = setTimeout(async () => {
        const toast = showLoadingToast({
            duration: 0,
            forbidClick: true,
            message: '加载中',
        });
        let n = await GetCategories({ searchKey: categoryValue.value.name })
        closeToast();
        columns2.value = n.content.list
        showPicker2.value = true
    }, 1000);

}
// 这个是点击确定
const onConfirm2 = (item) => {
    categoryValue.value = item
    showPicker2.value = false
}

// 第三个概念input框
const input3 = (e) => {
    if (!e.data) {
        showPicker3.value = false
        return
    }
    clearTimeout(temls3.value)
    temls3.value = setTimeout(async () => {
        const toast = showLoadingToast({
            duration: 0,
            forbidClick: true,
            message: '加载中',
        });
        // console.log(addressValue.value.name, '123');
        let n = await GetLocations({ searchKey: addressValue.value.name })
        closeToast();
        columns3.value = n.content.list
        showPicker3.value = true
    }, 1000);

}
// 这个是点击确定
const onConfirm3 = (item) => {
    addressValue.value = item
    showPicker3.value = false
}
// =============================================================================================


// 当input改变的时候 
watch(value, (newName, oldName) => {
    if (value.value.length == 0) {
        ind.value = 1
    } else {
        ind.value = 2
    }
});
// 这个是重置
const reset = () => {
    categoryValue.value = {}
    addressValue.value = {}
    gaiValue.value = {}
    localStorage.removeItem('obj')
    localStorage.removeItem('objObj')
    //   ind.value == 1 ? 'date' : 'rel'
}

// 点击搜索=================================================================================
const chachkFn = async () => {
    const toast = showLoadingToast({
        duration: 0,
        forbidClick: true,
        message: '加载中',
    });
    // return
    let n = await GetArticleList({
        keyword: shectValue.value.trim(),
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        topics_id: list.value[num.value - 1].id,
        ...obj.value
    })
    if (!n) {
        closeToast()
    }
    if (n.code != 200) {
        ElMessage(n.msg)
    }
    closeToast()
    listsHang.value = [...listsHang.value, ...n.content.list || []]
}
// /点击搜索
const schec = () => {
    let objs = {
        categoryUri: categoryValue.value.name ? categoryValue.value.uri : '',
        locationsUri: addressValue.value.name ? addressValue.value.wiki_uri : '',
        conceptUri: gaiValue.value.name ? gaiValue.value.uri : '',
        dateStart: time.value.split(',')[0],
        dateEnd: time.value.split(',')[0],
        sortBy: ind.value == 1 ? 'date' : 'rel'
    }
    console.log(objs, '0000000000000000000000000000000000000000000000000000');
    obj.value = objs
    localStorage.setItem('obj', JSON.stringify(objs))
    let objObj = {
        categoryValue: categoryValue.value,
        addressValue: addressValue.value,
        gaiValue: gaiValue.value,
        ind: ind.value
    }
    localStorage.setItem('objObj', JSON.stringify(objObj))
    pageNum.value = 1
    chachkFn()
}
// 点击搜索关键字
const comfig = () => {
    pageNum.value = 1
    listsHang.value = []
    chachkFn()
}
//点击列表弹出弹出层
const itemList = (items) => {
    item.value = items
    Detil.value.visibles = true
}
// 点击差号
const resets = () => {
    shectValue.value = ''

}
// 这个点击后tabs
const youTabs = (item, index) => {
    num.value = index + 1
    console.log(num.value, '123456789');
}
// 这个是切换时间
const timeXiang = (num) => {
    active.value = num
}
// 这个是选择日期后
const changeFn = (e) => {
    console.log(e, '0.0.0.00.');
    let yaer1 = e[0].getFullYear()
    // let Moth1 = e[0].getFullYear()
    let Moth1 = (e[0].getMonth() + 1 < 10 ? '0' + (e[0].getMonth() + 1) : e[0].getMonth() + 1)
    let Day1 = (e[0].getDate() < 10 ? '0' + e[0].getDate() : e[0].getDate());
    let yaer2 = e[1].getFullYear()
    // let Moth1 = e[0].getFullYear()
    let Moth2 = (e[1].getMonth() + 1 < 10 ? '0' + (e[1].getMonth() + 1) : e[1].getMonth() + 1)
    let Day2 = (e[1].getDate() < 10 ? '0' + e[1].getDate() : e[1].getDate());
    console.log(yaer1, Moth1, Day1);
    console.log(yaer2, Moth2, Day2);
    time.value = `${yaer1}-${Moth1}-${Day1},${yaer2}-${Moth2}-${Day2}`
    console.log(`${yaer1}/${Moth1}/${Day1}-${yaer2}/${Moth2}/${Day2}`, '0.0.00.0.00.');
}
// 下面点击后放进input框
const SolarTerms = (str) => {
    value.value = str
}
// 列表滑到下面
const onLoad = () => {
    clearTimeout(timeTim.value)
    timeTim.value = setTimeout(() => {
        pageNum.value++
        chachkFn()
        // console.log('99999999999999999999');
    }, 300)
}
</script>
<style scoped>
@import './index.scss';
</style>